<!-- 添加引诱剂 -->
<template>
	<view :class="['page', { iphoneX: isIphoneX }]">
		<template v-if="token && isLogin">
			<!-- 引诱剂详情 -->
			<template v-if="type == 'detail'">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="body">
						<template v-if="yyjDetail">
							<view class="detail-wrap m-t2">
								<view class="detail-item">
									<view class="label">设备名称</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ dev_name }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">害虫种类</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ pests.name }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">引诱剂</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ params.attr_name }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">型 号</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ params.attr_num }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">供应商</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ supplier.select }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">开始时间</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ start_date }}</view>
										</view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">过期时间</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ over_date }}</view>
										</view>
									</view>
								</view>
								<view v-if="status == 1" class="detail-item">
									<view class="label">状 态</view>
									<view class="detail-input">
										<view class="content"><view class="val f-red">已过期</view></view>
									</view>
								</view>
								<view class="detail-item">
									<view class="label">操作人员</view>
									<view class="detail-input">
										<view class="content">
											<view class="val">{{ params.worker }}</view>
										</view>
									</view>
								</view>
							</view>
						</template>

						<template v-else>
							<empty><view slot="msg">暂无引诱剂数据</view></empty>
						</template>
					</view>
					<view class="footer">
						<view class="fix-wrap bottom">
							<navigator
								v-if="yyjDetail"
								:url="'/package_common/attractant/attractant?type=edit&dev_id=' + dev_id + '&dev_type=' + dev_type + '&dev_name=' + dev_name"
								class="submit-btn"
								hover-class="none"
							>
								更换引诱剂
							</navigator>
							<navigator
								v-else
								:url="'/package_common/attractant/attractant?type=add&dev_id=' + dev_id + '&dev_type=' + dev_type + '&dev_name=' + dev_name"
								class="submit-btn"
								hover-class="none"
							>
								该设备还未添加引诱剂，立即添加
							</navigator>
						</view>
					</view>
				</template>
			</template>

			<!-- 添加引诱剂 -->
			<template v-if="type == 'add'">
				<view class="body">
					<view class="form-wrap m-t2">
						<view class="form-item">
							<view class="label">设备名称</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="dev_name" placeholder="输入文本" disabled /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">害虫种类</view>
							<view class="form-picker">
								<navigator class="picker" url="/package_pests/pest_list/pest_list?dev_type=1" hover-class="none">
									<view :class="['select-data t-l', { 'input-placeholder': pests.name == '' }]">{{ pests.name || '选择害虫种类' }}</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</navigator>
							</view>
						</view>
						<view class="form-item">
							<view class="label">引诱剂</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="params.attr_name" placeholder="输入引诱剂名称" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">型 号</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="params.attr_num" placeholder="输入引诱剂型号" /></view>
							</view>
						</view>
						<view class="form-item">
							<view class="label">供应商</view>
							<picker class="form-picker" mode="selector" :range="supplier.data" @change="changeSupplier">
								<view class="picker">
									<view :class="['select-data t-l', { 'input-placeholder': supplier.select == '' }]">{{ supplier.select || '选择供应商' }}</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</picker>
						</view>
						<view class="form-item">
							<view class="label">开始时间</view>
							<picker class="form-picker" mode="date" @change="changeDate($event, 1)">
								<view class="picker">
									<view class="select-data t-l">{{ start_date || '开始时间' }}</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</picker>
						</view>
						<view class="form-item">
							<view class="label">结束时间</view>
							<picker class="form-picker" mode="date" @change="changeDate($event, 2)" :value="over_date">
								<view class="picker">
									<view :class="['select-data t-l', { 'input-placeholder': over_date == '' }]">{{ over_date || '结束时间' }}</view>
									<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
								</view>
							</picker>
						</view>
						<view class="form-item">
							<view class="label">操作员</view>
							<view class="form-input">
								<view class="content"><input type="text" class="inp" v-model="params.worker" placeholder="输入操作员名称" /></view>
							</view>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="fix-wrap bottom"><view class="submit-btn" @click="submitInfo">确定添加</view></view>
				</view>
			</template>

			<!-- 更换引诱剂 -->
			<template v-if="type == 'edit'">
				<template v-if="loadingState.default">
					<loading :loadingState="loadingState"></loading>
				</template>
				<template v-else>
					<view class="body">
						<view class="form-wrap m-t2">
							<view class="form-item" @click="goDeviceList()">
								<view class="label">设备名称</view>
								<view class="form-input">
									<view class="content"><input type="text" class="inp" v-model="dev_name" placeholder="输入文本" disabled /></view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">害虫种类</view>
								<view class="form-picker">
									<navigator class="picker" url="/package_pests/pest_list/pest_list?dev_type=1" hover-class="none">
										<view class="select-data t-l">{{ pests.name || '选择害虫种类' }}</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</navigator>
								</view>
							</view>
							<view class="form-item">
								<view class="label">引诱剂</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.attr_name" placeholder="输入引诱剂名称" @focus="clearVal('attr_name')" disabled />
									</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">型 号</view>
								<view class="form-input">
									<view class="content">
										<input type="text" class="inp" v-model="params.attr_num" placeholder="输入引诱剂型号" @focus="clearVal('attr_num')" disabled />
									</view>
								</view>
							</view>
							<view class="form-item">
								<view class="label">供应商</view>
								<picker class="form-picker" mode="selector" :range="supplier.data" @change="changeSupplier">
									<view class="picker">
										<view :class="['select-data t-l', { 'input-placeholder': supplier.select == '' }]">{{ supplier.select || '选择供应商' }}</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">开始时间</view>
								<picker class="form-picker" mode="date" @change="changeDate($event, 1)">
									<view class="picker">
										<view class="select-data t-l">{{ start_date || '开始时间' }}</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">过期时间</view>
								<picker class="form-picker" mode="date" @change="changeDate($event, 2)">
									<view class="picker">
										<view :class="['select-data t-l', { 'input-placeholder': over_date == '' }]">{{ over_date || '结束时间' }}</view>
										<view class="icon"><view class="iconfont f-s26">&#xe653;</view></view>
									</view>
								</picker>
							</view>
							<view class="form-item">
								<view class="label">操作员</view>
								<view class="form-input">
									<view class="content"><input type="text" class="inp" v-model="params.worker" placeholder="输入操作员名称" @focus="clearVal('worker')" /></view>
								</view>
							</view>
						</view>
					</view>
					<view class="footer">
						<view class="fix-wrap bottom"><view class="submit-btn" @click="submitInfo">确定更换</view></view>
					</view>
				</template>
			</template>
		</template>
	</view>
</template>

<script>
import empty from '@/components/empty.vue';
import loading from '@/components/loading-more.vue';
import { getCurrenPage } from '@/common/util.js';
export default {
	name: '',
	data() {
		let date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
		let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
		let current_date = year + '-' + month + '-' + day;
		return {
			type: '',
			isIphoneX: getApp().globalData.isIphoneX,
			isLogin: false,
			appid: getApp().globalData.appid,
			token: uni.getStorageSync('token'),
			userInfo: uni.getStorageSync('userInfo'),
			loginStateUpdate: false,
			isStop: true,
			loadingState: {
				default: true
			},
			dev_name: '',
			dev_id: '',
			dev_type: '',
			supplier: {
				select: '',
				data: ['广州瑞丰生物科技有限公司', '广州瑞丰智能科技有限公司']
			},
			start_date: current_date,
			over_date: '',
			replace_date: '',
			status: 0,
			pests: {
				id: '',
				name: ''
			},
			yyjDetail: null,
			params: {
				worker: '',
				attr_name: '',
				attr_num: ''
			}
			// yyjUpdate: false
		};
	},
	async onLoad(params) {
		console.log(params);
		this.type = params.type;
		this.dev_name = params.dev_name;
		this.dev_id = params.dev_id;
		this.dev_type = params.dev_type;

		if (this.token) {
			this.isLogin = await this.$loginState('check');
			if (this.isLogin) {
				console.log(1);
				if (this.type == 'detail' || this.type == 'edit') {
					this.yyjDetail = await this.getAttractant();
					this.setYyjDetail();
				}

				if (this.type == 'add') {
					this.getAddData();
				}
			} else {
				this.isLogin = await this.$loginState('reset');
			}
		}
	},

	async onShow() {
		if (this.loginStateUpdate) {
			console.log(2);
			this.token = uni.getStorageSync('token');
			this.userInfo = uni.getStorageSync('userInfo');
			this.isLogin = true;
			this.loginStateUpdate = false;
			if (this.type == 'detail' || this.type == 'edit') {
				this.yyjDetail = await this.getAttractant();
				this.setYyjDetail();
			}
			if (this.type == 'add') {
				this.getAddData();
			}
		}

		if (!this.token && !this.isLogin) {
			this.isLogin = await this.$loginState('reset');
		}

		if (this.$store.state.yyjUpdate) {
			this.yyjDetail = await this.getAttractant();
			this.setYyjDetail();
			// this.yyjUpdate = false;
			this.$store.commit('yyjUpdate', false);
		}
	},

	onReady() {
		if (this.type == 'detail') {
			uni.setNavigationBarTitle({
				title: '引诱剂详情'
			});
		} else if (this.type == 'add') {
			uni.setNavigationBarTitle({
				title: '添加引诱剂'
			});
		} else if (this.type == 'edit') {
			uni.setNavigationBarTitle({
				title: '更换引诱剂'
			});
		}
	},

	methods: {
		getAddData() {
			let d = new Date();
			d.setMonth(d.getMonth() + 1);
			let m = d.getMonth() + 1 < 10 ? '0' + (d.getMonth() + 1) : d.getMonth() + 1;
			let da = d.getDate() < 10 ? '0' + d.getDate() : d.getDate();
			this.supplier.select = this.supplier.data[0];
			this.params.worker = this.userInfo.realname;
			this.over_date = `${d.getFullYear()}-${m}-${da}`;
		},

		goDeviceList() {
			uni.navigateTo({
				url: '/package_pests/pest_list/pest_list?dev_type=2'
			});
		},

		// 获取引诱剂
		getAttractant: async function() {
			let res = await this.$api.tool_api.getAttractant({
				appid: this.appid,
				token: this.token,
				device_type: this.dev_type,
				data_device_id: this.dev_id
			});
			if (res.data.ret == 0) {
				this.loadingState.default = false;
				return res.data.data.yyj;
			} else {
				this.loadingState.default = false;
				return res.data.data.yyj;
			}
		},

		// 获取设备列表
		getDeviceList: async function() {
			let res = await this.$api.tool_api.getDeviceList({
				appid: this.appid,
				token: this.token,
				device_type: this.device_info.type,
				user_id: this.userInfo.uid,
				page: this.params.page,
				limit: this.params.limit,
				keywork: this.params.keywork,
				adcode: this.city.adcode,
				typeid: this.device_info.typeid
			});
			console.log('设备列表', res);
			if (res.data.ret == 1000) {
				this.list.data = this.list.data.concat(res.data.data);
				this.list.total = res.data.data.total;
			}
		},

		// 设置详情
		setYyjDetail: function() {
			this.params.worker = this.yyjDetail.replace_name != 'undefined' ? this.yyjDetail.replace_name : '';
			if (this.type == 'detail') {
				// 判断引诱剂是否过期
				if (new Date(this.yyjDetail.over_date).getTime() - new Date().getTime() < 0) {
					this.status = 1;
				} else {
					this.status = 0;
				}
				this.start_date = this.yyjDetail.start_date != 'undefined' ? this.yyjDetail.start_date : '';
				this.over_date = this.yyjDetail.over_date != 'undefined' ? this.yyjDetail.over_date : '';
				this.replace_date = this.yyjDetail.replace_date != 'undefined' ? this.yyjDetail.replace_date : '';
			}
			this.pests.name = this.yyjDetail.pestName != 'undefined' ? this.yyjDetail.pestName : '';
			this.pests.id = this.yyjDetail.pest_id != 'undefined' ? this.yyjDetail.pest_id : '';
			this.supplier.select = this.yyjDetail.supplier != 'undefined' ? this.yyjDetail.supplier : '';
			this.params.attr_num = this.yyjDetail.model != 'undefined' ? this.yyjDetail.model : '';
			this.params.attr_name = this.yyjDetail.name != 'undefined' ? this.yyjDetail.name : '';
		},

		// 更换引诱剂清除原值
		clearVal: function(name) {
			this.params[name] = '';
		},

		// 选择时间
		changeDate: function(e, type) {
			// type 1 开始时间 2 结束时间
			if (type == 1) {
				this.start_date = e.detail.value;
			} else if (type == 2) {
				this.over_date = e.detail.value;
			}
		},

		// 选择供应商
		changeSupplier: function(e) {
			let index = e.detail.value;
			this.supplier.select = this.supplier.data[index];
		},

		submitInfo: async function() {
			if (this.params.attr_name == '') {
				this.$showToast({
					title: '请输入引诱剂名称'
				});
			} else if (this.params.attr_num == '') {
				this.$showToast({
					title: '请输入引诱剂型号'
				});
			} else if (this.supplier.select == '') {
				this.$showToast({
					title: '请选择供应商'
				});
			} else if (this.pests == '') {
				this.$showToast({
					title: '请选择害虫种类'
				});
			} else if (this.over_date == '') {
				this.$showToast({
					title: '请选择结束日期'
				});
			} else if (this.params.worker == '') {
				this.$showToast({
					title: '请输入操作人员名称'
				});
			} else {
				if (this.isStop) {
					this.isStop = false;
					uni.showLoading({
						title: '提交中...'
					});
					let res = await this.$api.tool_api.addAttractant({
						appid: this.appid,
						token: this.token,
						device_type: this.dev_type,
						data_device_id: this.dev_id,
						replace_name: this.params.worker,
						supplier: this.supplier.select,
						over_date: this.over_date,
						start_date: this.start_date,
						name: this.params.attr_name,
						model: this.params.attr_num,
						pest_id: this.pests.id
					});
					uni.hideLoading();
					if (res.data.ret == 1000) {
						this.$showToast({
							icon: 'success',
							title: '添加成功...'
						}).then(() => {
							this.$store.commit('yyjUpdate', true);
							setTimeout(() => {
								this.isStop = true;
								uni.navigateBack({
									delta: 1
								});
							}, 300);
						});
					} else {
						setTimeout(() => {
							this.isStop = true;
						}, 300);
					}
				}
			}
		}
	},
	computed: {
		yyjUpdate() {
			return this.$store.state.yyjUpdate;
		}
	},
	// watch: {
	// 	yyjUpdate: {
	// 		async handler(newer, older) {
	// 			console.log("handler");
	// 			if (this.type == 'detail') {
	// 				console.log(111)
	// 				this.loadingState.default = true;
	// 				this.yyjDetail = await this.getAttractant();
	// 				this.setYyjDetail();
	// 			}
	// 		},
	// 		immediate:true
	// 	}
	// },
	components: {
		empty,
		loading
	}
};
</script>

<style lang="less">
.submit-btn {
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
	background: #0085ff;
	color: #fff;
	font-size: 30rpx;
}
</style>
